<template>
  <div class="system">
    <span>绑定设备：</span>
    <el-select v-if="!bindDeviceName" v-model="deviceCode" filterable :disabled="!!bindDeviceName">
      <el-option
        v-for="item in deviceList"
        :key="item.id"
        :value="item.deviceCode"
        :label="item.deviceName"
      ></el-option>
    </el-select>

    <el-button v-if="!!!bindDeviceName" class="btn" type="primary" @click="bindDevice"
      >确定绑定</el-button
    >
    <el-button v-else class="btn" type="primary" @click="unbindDevice">解除绑定</el-button>
    <el-dialog
      v-if="!id"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        登录授权
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top" style="font-size: 20px; font-weight: 600">
        <el-col :span="18">
          &nbsp;&nbsp; 员工号：<el-input
            v-model="form.userCode"
            placeholder="员工号"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
          <br />
          <br />
          登录密码：<el-input
            type="password"
            v-model="form.password"
            placeholder="登录密码"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            class="button-login"
            @click="dialoglogin()"
            style="margin-top: 20px"
            >登录</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      width="30%"
      :show-close="false"
      :before-close="handleClose2"
    >
      <span slot="title" class="custom-dialog-title"
        >{{ title }}
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose2"
        ></i>
      </span>
      <el-row type="flex" align="top">
        <el-col>
          <el-button class="cancle" @click="handleClose2">取消</el-button>
        </el-col>
        <el-col>
          <el-button type="primary" class="btn" v-if="bindDeviceName" @click="unbindDevice"
            >确定解绑</el-button
          >
          <el-button type="primary" class="btn" v-else @click="bindDevice">确定绑定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBindDeviceMsg,
  getDeviceList,
  qualityLogin,
  relieveDeviceBind,
  bindDevice,
} from '@/api';

export default {
  name: 'SystemConfig',
  data() {
    return {
      bindDeviceName: '',
      deviceCode: '', // 回显的数据
      deviceList: [],
      dialogVisible: false,
      dialogVisible2: false,
      id: '', // 当前登录人ID
      form: {
        userCode: '',
        password: '',
      },
      title: '', // 确认解除绑定或确认绑定
    };
  },
  mounted() {
    this.getDeviceData();
    this.getBindDeviceMsg();
  },
  methods: {
    // 绑定设备回显
    async getBindDeviceMsg() {
      const res = await getBindDeviceMsg();
      console.log(res, '绑定设备回显');
      this.deviceCode = res.data.bindDeviceCode;
      this.bindDeviceName = res.data.bindDeviceName;
    },
    // 获取设备下拉信息
    async getDeviceData() {
      const res = await getDeviceList();
      console.log(res, '获取设备下拉信息');
      this.deviceList = res.data;
    },
    // 解除绑定或确认绑定的登录
    async dialoglogin() {
      const res = await qualityLogin(this.form);
      if (res.code === 200) {
        this.$message.success('登录成功');
        this.id = res.data.id;
        this.dialogVisible = false;
        if (this.bindDeviceName) {
          this.title = '确定绑定吗？';
        } else {
          this.title = '确定解除绑定吗？';
        }
        this.dialogVisible2 = true; // 打开确认是否解绑或确认是否绑定的dialog
      }
      if (res.code === 400) {
        this.$message.error('员工号或密码错误');
      }
      console.log(res, '解除绑定或确认绑定的登录');
    },
    async unbindDevice() {
      // 解除绑定设备的逻辑
      if (!this.id) {
        this.dialogVisible = true; // 打开登录
        return;
      }
      // const device = this.checkHasValue()
      // if(!device) return

      // title = "确定解除绑定？";
      const res = await relieveDeviceBind({
        userId: this.id,
        deviceCode: this.deviceCode,
      });
      console.log(res, '解除绑定的设备');
      if (res.code === 200) {
        this.dialogVisible2 = false;
        this.bindDeviceName = '';
      }
    },
    async bindDevice() {
      // 确认绑定设备的逻辑
      if (!this.id) {
        this.dialogVisible = true;
        return;
      }
      //  const device = this.checkHasValue()
      // if(!device) return

      // title = "确定绑定？";
      const res = await bindDevice({
        bindBy: this.id,
        bindDeviceCode: this.deviceCode,
      });
      console.log(res, '确定绑定的设备');
      if (res.code === 200) {
        this.dialogVisible2 = false;
        // this.bindDeviceName = "";
      }
      // this.deviceCode = res.data.bindDevice
    },
    // checkHasValue() {
    //   if (!this.deviceList.length) return false;
    //   const findItem = this.deviceList.find((item) => item.deviceName === this.deviceName);
    //   return findItem ? findItem : false;
    // },
    // 关闭对话框回调
    handleClose() {
      this.dialogVisible = false;
    },
    // 关闭是否绑定或是否解绑的对话框
    handleClose2() {
      this.dialogVisible2 = false;
    },
  },
};
</script>

<style scoped lang="scss">
.system {
  display: flex;
  height: 580px;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin: 0 6px 8px 6px;
  padding: 0 20px;
  font-size: 50px;
  font-weight: 600;
  .btn {
    flex-shrink: 0;
    width: 260px;
    height: 150px;
    color: #fff;
    font-size: 50px;
    text-align: center;
    background-color: #409eff;
    border: none;
    border-radius: 10px;
    margin-left: 50px;
  }
  .cancle {
    width: 100px;
    height: 50px;
    font-size: 30px;
    text-align: center;
  }
  .ok {
    width: 150px;
    height: 50px;
    background-color: #169bd5;
    font-size: 30px;
    text-align: center;
  }
  .button-login {
    height: 90px;
    width: 100px;
    font-size: 30px;
    text-align: center;
    margin-top: 5px !important;
  }
  .custom-dialog-title {
    font-size: 25px; /* 调整关闭按钮的字体大小 */
    cursor: pointer; /* 添加指针样式，以表明它是可点击的 */
  }
}
::v-deep .el-select .el-input .el-input__inner {
  width: 350px;
  height: 150px;
  font-size: 50px;
}
.el-select-dropdown__item {
  font-size: 24px;
}
</style>
